<template>
  <div class="nav-outer-container" :class="route.name !== 'home' ? 'active' : ''">
    <div class="nav-inner-container" :class="route.name !== 'home' ? 'active' : ''">
      <header class="header" :class="route.name !== 'home' ? 'header-active' : ''">
        <div class="header-container">
          <div class="left-section">
            <div class="logo-section">
              <img src="@/assets/icons/nav/logo.webp" alt="Logo" class="logo" />
            </div>
            <nav class="nav">
              <router-link to="/" class="nav-tab" active-class="active">
                <img
                  :src="isActive('/') && getImageUrl('home.webp')"
                  alt="首页"
                  v-show="isActive('/')"
                />
                <span class="title">首页</span>
              </router-link>
              <router-link
                to="/score"
                class="nav-tab header-score"
                :class="isActive('/score') && 'active'"
              >
                <img
                  :src="isActive('/score') && getImageUrl('score.webp')"
                  alt="即比分"
                  v-show="isActive('/score')"
                />
                <span class="title">即时比分</span>
                <div class="score-list">
                  <ScoreBoard />
                </div>
              </router-link>
              <router-link
                to="/live"
                class="nav-tab header-live"
                :class="isActive('/live') && 'active'"
              >
                <img
                  :src="isActive('/live') && getImageUrl('live.webp')"
                  alt="直播"
                  v-show="isActive('/live')"
                />
                <span class="title">直播</span>
                <div class="live-list">
                  <LiveBoard />
                </div>
              </router-link>
              <router-link
                to="/schedule"
                class="nav-tab"
                :class="isActive('/schedule') && 'active'"
              >
                <img
                  :src="isActive('/schedule') && getImageUrl('schedule.webp')"
                  alt="赛程"
                  v-show="isActive('/schedule')"
                />
                <span class="title">赛程</span>
              </router-link>
              <router-link to="/info" class="nav-tab" :class="isActive('/info') && 'active'">
                <img
                  :src="isActive('/info') && getImageUrl('info.webp')"
                  alt="有料"
                  v-show="isActive('/info')"
                />
                <span class="title">有料</span>
              </router-link>
              <router-link to="/news" class="nav-tab" :class="isActive('/news') && 'active'">
                <img
                  :src="isActive('/news') && getImageUrl('news.webp')"
                  alt="头条"
                  v-show="isActive('/news')"
                />
                <span class="title">头条</span>
              </router-link>
              <router-link
                to="/download"
                class="nav-tab"
                :class="isActive('/download') && 'active'"
              >
                <img
                  :src="isActive('/download') && getImageUrl('download-page.webp')"
                  alt="APP下载"
                  v-show="isActive('/download')"
                />
                <span class="title">APP下载</span>
              </router-link>
            </nav>
          </div>
          <div class="right-section">
            <!-- <div class="icon-section">
              <img src="@/assets/icons/nav/search.webp" alt="Search" class="icon" />
              <span class="icon-text">搜索</span>
            </div> -->
            <!-- <div class="icon-section" @click="download">
              
            </div> -->
            <Popover class="" placement="bottom" @click="download">
              <div class="icon-section">
                <img src="@/assets/icons/nav/download.webp" alt="Download" class="icon" />
                <span class="icon-text">下载</span>
              </div>

              <template #content>
                <download-tip />
              </template>
            </Popover>
            <div class="icon-section" @click="() => goToPage('liveApplication')">
              <img src="@/assets/icons/nav/broadcast-icon.webp" alt="Broadcast" class="icon" />
              <span class="icon-text">开播</span>
            </div>
            <div class="icon-section" @click="() => goToPage('follow')">
              <img src="@/assets/icons/nav/follow.webp" alt="Follow" class="icon" />
              <span class="icon-text">关注</span>
            </div>
            <!-- <div class="icon-section">
              <img src="@/assets/icons/nav/night-mode.webp" alt="Night Mode" class="icon" />
              <span class="icon-text">夜间</span>
            </div> -->
            <Popover
              class="button_list"
              :overlayInnerStyle="{ background: 'transparent', padding: 0 }"
              v-if="!userState?.token"
              placement="bottomLeft"
            >
              <!-- <button class="login" @click="login">登录</button>
              <button class="register" @click="login">注册</button> -->

              <div class="avatar" @click="login"></div>
              <template #content>
                <login-tooltip />
              </template>
            </Popover>
            <Popover
              class="avatar_container"
              :overlayInnerStyle="{ background: 'transparent', padding: 0 }"
              v-if="userState?.token"
              placement="bottomLeft"
            >
              <img
                :src="userState?.userInfo?.face != '' ? userState?.userInfo?.face : defaultAvatar"
                class="avatar"
              />
              <!-- <img src="@/assets/imgs/default-head-1.webp" class="avatar" /> -->
              <template #content>
                <UserPanel />
              </template>
            </Popover>

            <!-- <div class="user-info" v-if="userState?.userInfo?.token">
              <div class="user-info-left">
                <span class="user-id">{{ userState?.userInfo?.user_info?.nick }}</span>
              </div>
              <div>
                <p class="points">球钻: {{ userState?.userInfo?.user_info?.ball_diamond }}</p>
              </div>
            </div> -->
          </div>
        </div>
      </header>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue'
import ScoreBoard from './Scoreboard.vue'
import LiveBoard from './Liveboard.vue'
import LoginTooltip from './LoginTooltip.vue'
import UserPanel from './userPanel.vue'
import DownloadTip from './downloadTip.vue'
import { AppConfigStore } from '@/stores/app'
import { useRoute } from 'vue-router'
import { userStore } from '@/stores/user'
import { Popover } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const route = useRoute()
// export default {
//   name: 'FooterNav'
// }

const defaultAvatar = new URL('@/assets/imgs/default-head-1.webp', import.meta.url).href
const userState = userStore()
const getImageUrl = (name) => {
  return new URL(`../assets/icons/nav/${name}`, import.meta.url).href
}
const appConfig = AppConfigStore()

const download = () => {
  router.push({ path: '/download' })
}
const isActive = (path) => {
  const isArray = path.split(',').length > 1
  // console.log(isArray)
  // if (isArray) {
  //   if (path.indexOf(route.path) !== -1) return true
  // } else {
  //   return route.path === path
  // }
  return route.path.startsWith(path)
}

const login = () => {
  // console.log(1111)
  appConfig.LoginModalHandle(true)
}
const goToPage = (type) => {
  if (!userState?.token) {
    login()
    return
  }
  if (type === 'profile') {
    router.push({ path: '/profile' })
  } else if (type === 'follow') {
    router.push({ path: '/profile/follow' })
  } else if (type === 'wallet') {
    router.push({ path: '/profile/wallet' })
  } else if (type === 'liveApplication') {
    router.push({ path: '/profile/live-application' })
  } else if (type === 'vip') {
    router.push({ path: '/profile/vip' })
  }
}

watch(route, (newRoute) => {
  // console.log(newRoute, 'newRoute')
})
</script>

<style lang="scss" scoped>
.nav-outer-container {
  width: 100%;
  display: flex;
  // justify-content: center;
  //   background-color: #f5f5f5; /* 示例背景色 */
  //   padding: 20px; /* 示例内边距 */
  box-sizing: border-box;
  height: 70px;
  // position: sticky;
  // top: 0;
  position: relative;
  z-index: 20;

  background: #f5f7ff;
  transition: all 0.3s;
  .active {
    background: #fff;
  }
}

.nav-inner-container {
  max-width: 100%;
  min-width: 1200px;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    180deg,
    #c8ffd3 0%,
    rgba(229, 255, 235, 0.34) 79%,
    rgba(245, 247, 255, 1) 100%
  );
  // background-color: #ffffff; /* 示例背景色 */
  //   padding: 20px; /* 示例内边距 */
  box-sizing: border-box;
  transition: all 0.3s;
  .active {
    background-color: #ffffff; /* 示例背景色 */
  }
}

/* 最小宽度限制 */
@media (max-width: 1400px) {
  .inner-container {
    max-width: 1400px;
    // overflow-x: auto; /* 如果内容超过1400px，显示滚动条 */
  }
}
.header {
  //   background-color: #e6f7e6;
  max-width: 1400px;
  // max-width: 1400px;
  // min-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  &.header-active {
    width: 1200px;
  }
  //   padding: 10px 20px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-section {
  display: flex;
  align-items: center;

  .logo-section {
    display: flex;
    align-items: center;
    margin-right: 20px;

    .logo {
      height: 40px;
    }

    .logo-text {
      font-size: 16px;
      font-weight: bold;
      margin-left: 5px;
    }
  }

  .nav {
    display: flex;

    .nav-tab {
      margin: 0 10px;
      text-decoration: none;
      //   color: #333;
      font-size: 16px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #525a79;
      line-height: 16px;
      display: flex;
      align-items: center;
      padding: 7px 10px;
      // transition: all 1s;
      border-radius: 30px;
      img {
        height: 18px;
        margin-right: 6px;
      }
      &:hover {
        .title {
          color: #007a33;
        }
      }
      &.active {
        background: #007a33;
        .title {
          color: #fff !important;
        }
      }
    }
    .header-score {
      &:hover {
        .score-list {
          opacity: 1;
          height: 290px !important;
        }
      }
    }
    .header-live {
      &:hover {
        .live-list {
          opacity: 1;
          height: 290px !important;
        }
      }
    }
  }
}
.router-link-active {
  background: #007a33;
  .title {
    color: #fff !important;
  }
}

.right-section {
  display: flex;
  align-items: center;

  .icon-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 0 10px;
    margin-left: 15px;
    cursor: pointer;

    .icon {
      width: 24px;
      height: 24px;
    }

    .icon-text {
      font-size: 12px;
      // margin-left: 5px;
    }
    &:hover {
      color: #007a33;
    }
  }
  .button_list {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
    position: relative;
    width: 40px;
    height: 40px;
    width: 40px;
    height: 40px;
    background: url('@/assets/icons/nav/login-default.png') no-repeat;
    background-size: 100% 100%;
    .avatar {
      border-radius: 50%;
    }
    &:hover {
      width: 40px;
      height: 40px;
      background: url('@/assets/icons/nav/login-active.png') no-repeat;
      background-size: 100% 100%;
      // .login-modal-wrap {
      //   display: block;
      // }
    }
  }
  .avatar_container {
    width: 40px;
    height: 40px;
    // margin: 0 10px;
    margin-left: 20px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
    background: #f1f1f1;
    .avatar {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background: #f1f1f1;
    }
  }
  .login,
  .register {
    border: none;
    // background-color: #28a745;
    color: white;
    // padding: 8px 16px;
    // margin: 0 5px;

    // border-radius: 4px;
    outline: none;
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    background: url('@/assets/icons/nav/login.png') no-repeat;
    background-size: 100% 100%;
    // &:hover {
    //   background-color: #218838;
    // }
  }
  .login {
    margin-left: 20px;
  }
  .register {
    color: black;
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    background: url('@/assets/icons/nav/register.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
    margin-left: 10px;
  }
  .user-info {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 10px;
    font-size: 14px;
    // .avatar {
    //   width: 40px;
    //   height: 40px;
    // }
    .user-info-left {
      display: flex;
      align-items: center;
    }
    .user-id {
      margin-right: 10px;
      font-weight: bold;
    }

    .vip {
      background-color: #f39c12;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 10px;
    }

    .points {
      color: #555;
    }
  }
}
.score-list,
.live-list {
  transition:
    height 0.32s ease-in-out,
    opacity 0.52s ease-in-out;
  // height: 260px !important;
  height: 0;
  z-index: 100;
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: start;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border-radius: 0px 0px 0px 0px;
  width: 100%;
  margin-top: 60px;
}

:deep(.ant-popover-inner) {
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.ant-popover-inner-content) {
  padding: 0;
}
</style>
